<template>
  <view class="classify">
    <view class="classify_head_view"><SearchVue></SearchVue> </view>

    <view class="classify_container">
      <view class="left">
        <scroll-view style="height: 100%" :scroll-y="true" enable-flex>
          <view class="class_box">
            <view
              class="class_items"
              v-for="item in selectOptions"
              :key="item.id"
              :class="{ active: item.id === selectActive }"
              @click="selectActive = item.id"
            >
              <text class="text">{{ item.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="right">
        <view class="classify_top">
          <u-collapse>
            <u-collapse-item title="全部分类" :border="false">
              <ClassifyWarp></ClassifyWarp>
            </u-collapse-item>
          </u-collapse>
          <!-- <text class="top_text">全部分类</text>
          <view class="top_icon">
            <image
              style="width: 28rpx; height: 28rpx"
              src="@/static/icon/open_down.png"
              mode="aspectFit"
            />
          </view> -->
        </view>
        <!-- <u-overlay :show="showSelect" @click="showSelect = false" zIndex="10">
          <ClassifyWarp></ClassifyWarp>
        </u-overlay> -->
        <scroll-view style="flex: 1 0 auto; height: 0" :scroll-y="true">
          <view class="goods_box">
            <GoodBlock
              style="margin-bottom: 20rpx"
              v-for="item in 10"
              :key="item"
            ></GoodBlock>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import SearchVue from "@/component/Search/index.vue";
import GoodBlock from "./component/GoodBlock.vue";
import ClassifyWarp from "./component/ClassifyWarp.vue";
import { getGoodsCategories } from "./modules/api";
import { onReady } from "@dcloudio/uni-app";

const showSelect = ref(false);
const selectActive = ref(1);

const selectOptions = ref([
  { id: 264, name: "冯十二" },
  { id: 759, name: "吴十" },
  { id: 128, name: "赵六" },
  { id: 630, name: "周九" },
  { id: 875, name: "钱七" },
  { id: 401, name: "王五" },
  { id: 934, name: "张三" },
  { id: 543, name: "孙八" },
  { id: 702, name: "李四" },
  { id: 315, name: "郑十一" },
]);

onReady(() => {});

function onConfirm() {}
</script>

<style lang="scss" scope>
.classify {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 0;
  .classify_head_view {
    padding: 10rpx 28rpx;
  }
  .classify_container {
    flex: 1 0 auto;
    height: 0;
    overflow: hidden;
    display: flex;
    .right {
      flex: 1 0 auto;
      width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      .classify_top {
        // height: 110rpx;
        width: 100%;
        background-color: #fff;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        // align-content: center;
        // padding: 0 30rpx;
        // .top_text {
        //   font-weight: 500;
        //   font-size: 26rpx;
        //   color: #333333;
        //   line-height: 1;
        // }
        // .top_icon {
        //   width: 76rpx;
        //   height: 100%;
        //   background-color: #fff;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        // }
      }
      .goods_box {
        //  display: flex;
        //  flex-direction: column;
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
        padding-top: 20rpx;
      }
    }
    .left {
      height: 100%;
      width: 180rpx;
      background-color: #f8f9fa;
      .class_box {
        .class_items {
          height: 110rpx;
          width: 100%;
          line-height: 1;
          align-items: center;
          display: flex;
          justify-content: center;
          transition: all 0.25s;
          padding: 0 10rpx;
          .text {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 110rpx;
            transition: all 0.25s;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &.active {
            background-color: #fff;
            .text {
              color: #333;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
</style>
